<template>
  <div class="top">
    <MyHeader title="猫眼电影" :hasIcon="true"></MyHeader>
    <MyTabBar />
  </div>

  <!-- <keep-alive>
    <RouterView v-if="$route.meta.xxx" />
  </keep-alive>
  <RouterView v-if="!$route.meta.xxx" /> -->

  <!-- <router-view v-slot="{ Component }" v-if="$route.meta.requireAlive">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>

  <RouterView v-if="!$route.meta.requireAlive" /> -->

  <!-- <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view> -->

  <router-view></router-view>
</template>

<script>
import MyHeader from "./components/MyHeader.vue";
import MyTabBar from "./components/MyTabBar.vue";

export default {
  components: {
    MyHeader,
    MyTabBar,
  },
};
</script>

<style lang="less" scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 375px;
  height: 96px;
  z-index: 99;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
